<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/main}">
<head>
    <title>热销商品分析</title>
</head>
<body>
    <div layout:fragment="title">热销商品分析</div>
    
    <div layout:fragment="content">
        <!-- 顶部操作栏 -->
        <div class="row mb-3">
            <!-- 日期筛选 -->
            <div class="col-md-8">
                <form th:action="@{/sales/top-selling}" method="get" class="row g-3">
                    <div class="col-auto">
                        <label for="startDate" class="col-form-label">开始日期</label>
                    </div>
                    <div class="col-auto">
                        <input type="date" class="form-control" id="startDate" name="startDate" th:value="${startDate}">
                    </div>
                    <div class="col-auto">
                        <label for="endDate" class="col-form-label">结束日期</label>
                    </div>
                    <div class="col-auto">
                        <input type="date" class="form-control" id="endDate" name="endDate" th:value="${endDate}">
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary">筛选</button>
                    </div>
                    <div class="col-auto" th:if="${startDate != null || endDate != null}">
                        <a th:href="@{/sales/top-selling}" class="btn btn-outline-secondary">重置</a>
                    </div>
                </form>
            </div>
            <div class="col-md-4 text-end">
                <a th:href="@{/sales}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> 返回销售列表
                </a>
            </div>
        </div>
        
        <!-- 热销商品卡片 -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">热销商品排行</h6>
            </div>
            <div class="card-body">
                <div th:if="${#lists.isEmpty(topProducts)}" class="text-center py-5">
                    <p class="text-muted">该时间段内暂无销售数据</p>
                </div>
                <div th:unless="${#lists.isEmpty(topProducts)}">
                    <!-- 图表 -->
                    <div class="mb-4">
                        <canvas id="topProductsChart"></canvas>
                    </div>
                    
                    <!-- 热销商品表格 -->
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead class="table-dark">
                                <tr>
                                    <th>排名</th>
                                    <th>商品ID</th>
                                    <th>商品名称</th>
                                    <th>销售数量</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="product, stat : ${topProducts}">
                                    <td th:text="${stat.count}">1</td>
                                    <td th:text="${product.id}">1</td>
                                    <td th:text="${product.name}">商品名称</td>
                                    <td th:text="${product.totalQuantity}">100</td>
                                    <td>
                                        <a th:href="@{'/products/detail/' + ${product.id}}" class="btn btn-sm btn-info" title="商品详情">
                                            <i class="bi bi-info-circle"></i>
                                        </a>
                                        <a th:href="@{'/sales/product/' + ${product.id}}" class="btn btn-sm btn-warning" title="销售记录">
                                            <i class="bi bi-cart-check"></i>
                                        </a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 筛选信息提示 -->
        <div class="card bg-light mb-4" th:if="${startDate != null || endDate != null}">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <i class="bi bi-info-circle-fill me-2 text-primary"></i>
                    <span>当前数据筛选范围: 
                        <span th:text="${startDate != null ? startDate : '不限'}">开始日期</span>
                        至
                        <span th:text="${endDate != null ? endDate : '当前'}">结束日期</span>
                    </span>
                </div>
            </div>
        </div>
        
        <!-- 无数据提示 -->
        <div class="card bg-light mb-4" th:if="${#lists.isEmpty(topProducts)}">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <i class="bi bi-exclamation-circle-fill me-2 text-warning"></i>
                    <span>暂无热销商品数据，可能原因：</span>
                </div>
                <ul class="mb-0 mt-2">
                    <li>选择的时间范围内没有销售记录</li>
                    <li>系统中尚未录入销售数据</li>
                </ul>
                <div class="alert alert-info mt-3 mb-0">
                    <i class="bi bi-lightbulb"></i> 建议：尝试扩大日期筛选范围或添加更多销售记录。
                </div>
            </div>
        </div>
    </div>
    
    <div layout:fragment="page_scripts">
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script th:inline="javascript">
            document.addEventListener('DOMContentLoaded', function() {
                const topProducts = [[${topProducts}]];
                
                if (topProducts && topProducts.length > 0) {
                    // 准备图表数据
                    const labels = topProducts.map(p => p.name);
                    const quantities = topProducts.map(p => p.totalQuantity);
                    
                    // 生成随机背景色
                    const backgroundColors = generateColors(topProducts.length);
                    
                    // 绘制图表
                    const ctx = document.getElementById('topProductsChart').getContext('2d');
                    new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: labels,
                            datasets: [{
                                label: '销售数量',
                                data: quantities,
                                backgroundColor: backgroundColors,
                                borderColor: backgroundColors.map(color => color.replace('0.6', '1')),
                                borderWidth: 1
                            }]
                        },
                        options: {
                            responsive: true,
                            plugins: {
                                legend: {
                                    position: 'top',
                                    display: false
                                },
                                title: {
                                    display: true,
                                    text: '热销商品排行'
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    title: {
                                        display: true,
                                        text: '销售数量'
                                    }
                                }
                            }
                        }
                    });
                }
                
                // 生成随机颜色
                function generateColors(count) {
                    const colors = [];
                    const baseColors = [
                        'rgba(54, 162, 235, 0.6)',
                        'rgba(255, 99, 132, 0.6)',
                        'rgba(255, 206, 86, 0.6)',
                        'rgba(75, 192, 192, 0.6)',
                        'rgba(153, 102, 255, 0.6)',
                        'rgba(255, 159, 64, 0.6)'
                    ];
                    
                    for (let i = 0; i < count; i++) {
                        if (i < baseColors.length) {
                            colors.push(baseColors[i]);
                        } else {
                            const r = Math.floor(Math.random() * 255);
                            const g = Math.floor(Math.random() * 255);
                            const b = Math.floor(Math.random() * 255);
                            colors.push(`rgba(${r}, ${g}, ${b}, 0.6)`);
                        }
                    }
                    return colors;
                }
                
                // 日期选择器联动
                const startDateInput = document.getElementById('startDate');
                const endDateInput = document.getElementById('endDate');
                
                if (startDateInput && endDateInput) {
                    startDateInput.addEventListener('change', function() {
                        if (endDateInput.value && this.value > endDateInput.value) {
                            endDateInput.value = this.value;
                        }
                    });
                    
                    endDateInput.addEventListener('change', function() {
                        if (startDateInput.value && this.value < startDateInput.value) {
                            startDateInput.value = this.value;
                        }
                    });
                }
            });
        </script>
    </div>
</body>
</html> 